<template>
  <view class="course-des">
    <header-vue :back="true" :titPosition="'left'" :title="title"></header-vue>
    <view class="course-des-content">
      <!-- 视频 -->
      <view class="course-video">
        <video
          id="myVideo"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
          controls
        ></video>
      </view>
      <!-- 课程标题 -->
      <view class="course-title">
        <view class="course-title-top">
          <view class="left-title">厨房油污清理小妙招</view>
          <view class="right-status">未学习</view>
        </view>

        <view class="course-title-bottom">
          <image
            src="/static/images/frame.png"
            mode="scaleToFill"
            style="width: 28rpx; height: 28rpx; margin-right: 8rpx"
          />
          <text>3.6万</text>
        </view>
      </view>
      <!-- 课程介绍 -->
      <view class="course-intro">
        <view class="course-intro-tab">
          <view
            v-for="item in tabList"
            :key="item.type"
            :class="[
              'course-intro-tab-item',
              courseType == item.type ? 'active' : '',
              item.type == 0 ? 'line' : 'line2',
            ]"
            @click="onCourseTypeClick(item.type)"
          >
            <text>{{ item.text }}</text>
            <image
              v-show="courseType == item.type"
              src="/static/images/jiantou-bottom.png"
              style="width: 26rpx; height: 12rpx; margin-top: 4rpx"
            />
            <view v-show="courseType != item.type" style="height: 16rpx"></view>
          </view>
        </view>

        <view class="course-intro-content">
          <view class="intro" v-show="courseType == 0">
            <view class="intro-des">
              如何才能更快速的清理厨房油污，首先你需要准备一个干净的抹布、一盆温水以及5克的油污清洁剂，将清洁剂倒入水中静置5分钟
            </view>
            <view class="intro-img">
              <u-image mode="aspectFill" width="100%" height="360rpx"></u-image>
            </view>
            <view> </view>
          </view>
          <view class="catalogue" v-show="courseType == 1">
            <view
              :class="[
                'catalogue-item',
                catalogueIndex == index ? 'catalogue-active' : '',
              ]"
              v-for="(item, index) in catalogueList"
              :key="item.id"
              @click="onCatalogueClick(item, index)"
            >
              <view class="catalogue-item-title">{{ item.title }}</view>
              <view class="catalogue-item-time">{{ item.time }}</view>

              <view
                class="catalogue-shengyin-ico"
                v-if="catalogueIndex == index"
              >
                <image
                  src="/static/images/shengyin.png"
                  style="width: 28rpx; height: 28rpx"
                />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部填充 -->
      <view class="course-fill"> </view>

      <!-- 底部模拟考试按钮 -->
      <view class="course-bottom">
        <view class="course-bottom-btn" @click="onExamClick"
          >模拟考试</view
        ></view
      >
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";

export default {
  data() {
    return {
      title: "课程详情",
      // 课程介绍类型
      courseType: 0,
      tabList: [
        { type: 0, text: "课程介绍" },
        { type: 1, text: "目录章节" },
      ],
      catalogueList: [
        { id: 1, title: "01集：醋的使用", time: "00:00:00" },
        { id: 2, title: "02集：油烟机的清洗", time: "00:00:00" },
        { id: 3, title: "03集：燃气灶的清洗", time: "00:00:00" },
      ],
      //目录当前选择
      catalogueIndex: 0,
    };
  },
  components: {
    headerVue,
  },
  onLoad(options) {},
  methods: {
    onCourseTypeClick(type) {
      if (this.courseType == type) return;
      this.courseType = type;
    },
    onCatalogueClick(item, index) {
      this.catalogueIndex = index;
    },
    onExamClick() {
      uni.navigateTo({
        url: "/views-master/study/exam",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.course-des {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  background: #f6f6f6;

  .course-des-content {
    flex: 1;

    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;

    .course-video {
      height: 420rpx;
      width: 100%;

      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      ::v-deep .uni-video-video {
        background: #f6f6f6;
      }
      video {
        width: 100%;

        height: 100%;
      }
    }
    .course-title {
      background: #fff;
      box-sizing: border-box;
      padding: 28rpx 32rpx;
      .course-title-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;
        .left-title {
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 36rpx;
          color: #333333;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .right-status {
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 24rpx;
          color: #df9824;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .course-title-bottom {
        display: flex;
        align-items: center;
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 24rpx;
        color: #df9824;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .course-intro {
      margin-top: 20rpx;
      background: #fff;
      box-sizing: border-box;
      padding: 28rpx 32rpx;
      .course-intro-tab {
        box-sizing: border-box;

        display: flex;
        justify-content: center;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        text-align: right;
        font-style: normal;
        text-transform: none;
        .course-intro-tab-item {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .active {
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          text-align: right;
          font-style: normal;
          text-transform: none;
        }
        .line {
          margin-right: 50rpx;
        }
        .line2 {
          margin-left: 50rpx;
        }
      }
      .course-intro-content {
        box-sizing: border-box;

        padding: 30rpx 0;
        position: relative;
        .intro {
          .intro-des {
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            text-align: justified;
            font-style: normal;
            text-transform: none;
            margin-bottom: 20rpx;
          }
          .intro-img {
            width: 100%;

            height: 360rpx;
          }
        }
        .catalogue {
          .catalogue-item {
            position: relative;
            width: 100%;
            height: 142rpx;
            background: #f6f7f8;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            margin-bottom: 28rpx;
            box-sizing: border-box;
            padding: 28rpx 28rpx 28rpx 84rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            .catalogue-shengyin-ico {
              position: absolute;
              left: 28rpx;
              top: 50%;
              transform: translateY(-50%);
            }
            .catalogue-item-title {
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              text-align: justified;
              font-style: normal;
              text-transform: none;
            }
            .catalogue-item-time {
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              text-align: justified;
              font-style: normal;
              text-transform: none;
            }
          }
          .catalogue-active {
            .catalogue-item-title {
              font-weight: 500;
              font-size: 28rpx;
              color: #0785cf;
              text-align: justified;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
  }
  .course-fill {
    height: 88rpx;
  }
  .course-bottom {
    //固定定位
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 6rpx 32rpx;
    .course-bottom-btn {
      width: 100%;
      height: 76rpx;
      background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 36rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>
